<template>
  <div class="queryData">
    <div class="queryItem">
      <div class="spanname">用户名</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入用户名"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">账号</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入账号"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">电话</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入电话"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">邮箱</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入邮箱"
        />
      </div>
    </div>
  </div>
  <div class="operition">
    <el-button type="primary" class="reset" @click="OpencreateTrain"
      >新建</el-button
    >

    <el-button type="primary" class="reset">搜索</el-button>
    <el-button type="info" class="reset">重置</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="ID" width="100" />
    <el-table-column prop="name" label="列车名" width="120" />
    <el-table-column prop="code" label="车站编码" width="120" />
    <el-table-column prop="province" label="省份" width="120" />
    <el-table-column prop="city" label="城市" width="120" />
    <el-table-column prop="created_time" label="创建时间" width="300" />
    <el-table-column prop="updated_time" label="修改时间" width="300" />

    <el-table-column fixed="right" label="操作" min-width="150">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="showUpdateModel(row)">
          编辑
        </el-button>
        <el-button type="danger" size="small" @click="del(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPageSize"
    />
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="编辑用户信息"
    width="500"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="editUserForm" class="demo-form-inline">
      <el-form-item label="id">
        <el-input v-model="editUserForm.id" placeholder="请输入id" clearable />
      </el-form-item>

      <el-form-item label="列车名">
        <el-input
          v-model="editUserForm.name"
          placeholder="请输入列车名"
          clearable
        />
      </el-form-item>

      <el-form-item label="车站编码">
        <el-input
          v-model="editUserForm.code"
          placeholder="请输入车站编码"
          clearable
        />
      </el-form-item>
      <el-form-item label="省份">
        <el-input
          v-model="editUserForm.province"
          placeholder="请输入省份"
          clearable
        />
      </el-form-item>
      <el-form-item label="城市">
        <el-input
          v-model="editUserForm.city"
          placeholder="请输入城市"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditStation"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogVisible1"
    title="新建列车"
    width="500"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="addTrainForm" class="demo-form-inline">
      <el-form-item label="列车名">
        <el-input
          v-model="addTrainForm.name"
          placeholder="请输入列车名"
          clearable
        />
      </el-form-item>

      <el-form-item label="车站编码">
        <el-input
          v-model="addTrainForm.code"
          placeholder="请输入车站编码"
          clearable
        />
      </el-form-item>
      <el-form-item label="省份">
        <el-input
          v-model="addTrainForm.province"
          placeholder="请输入省份"
          clearable
        />
      </el-form-item>
      <el-form-item label="城市">
        <el-input
          v-model="addTrainForm.city"
          placeholder="请输入城市"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="handleAddTrain"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import pinia from "@/store";
import { ElMessage } from "element-plus";

import { getDelectTrainStationApi } from "@/api/train.js";
import { getUpdateTrainStationApi } from "@/api/train.js";
import { getTrainStationApi } from "@/api/train.js";

import { getCreateTrainStationApi } from "@/api/train.js";
import useCounter from "@/store/counter";
import { Loading } from "element-plus/es/components/loading/src/service";
const counterStore = useCounter(pinia);

// 新建列车
const dialogVisible1 = ref(false);
const addTrainForm = reactive({
  name: "",
  code: "",
  province: "",
  city: "",
});
const OpencreateTrain = () => {
  dialogVisible1.value = true;
  addTrainForm.name = row.name;
  addTrainForm.code = row.code;
  addTrainForm.province = row.province;
  addTrainForm.city = row.city;
};

const handleAddTrain = async () => {
  const creatparams = {
    name: addTrainForm.name,
    code: addTrainForm.code,
    province: addTrainForm.province,
    city: addTrainForm.city,
  };
  const res = await getCreateTrainStationApi(creatparams);
  console.log(res);
  dialogVisible1.value = false;
  if ((res.message = "success")) {
    fetchData();

    ElMessage({
      message: "新建始发站成功！",
      type: "success",
    });
  } else {
    ElMessage({
      message: "创建始发站！请重试",
      type: "error",
    });
  }
};
// 编辑列车信息
import { ElMessageBox } from "element-plus";
const editUserForm = reactive({
  id: "",
  name: "",
  code: "",
  province: "",
  city: "",
});

const dialogVisible = ref(false);
const showUpdateModel = (row) => {
  console.log(row);
  dialogVisible.value = true;
  editUserForm.id = row.id;
  editUserForm.name = row.name;
  editUserForm.code = row.code;
  editUserForm.province = row.province;
  editUserForm.city = row.city;
};
const handleEditStation = async () => {
  dialogVisible.value = false;
  const params = {
    id: editUserForm.id,
    name: editUserForm.name,
    code: editUserForm.code,
    province: editUserForm.province,
    city: editUserForm.city,
  };
  const res = await getUpdateTrainStationApi(params);
  console.log("修改列车车站信息", res);
  if ((res.message = "success")) {
    fetchData();
    ElMessage({
      message: "修改车站信息成功！",
      type: "success",
    });
  } else {
    ElMessage({
      message: "修改车站信息失败！请重试",
      type: "error",
    });
  }
};
const handleClose = (done) => {
  ElMessageBox.confirm("您确定要关闭吗?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
// 获取列表部分
const tableData = ref([]);
const totalPageSize = ref(10);
const fetchData = async () => {
  try {
    const params = {};
    const res = await getTrainStationApi(params);
    console.log("获取列车车站列表", res);

    tableData.value = res.data.list;
    totalPageSize.value = res.data.total_size;
  } catch (error) {
    console.log(error);
  }
};

onMounted(fetchData);
// 删除列车
const del = async (record) => {
  console.log("每条数据", record);
  try {
    const params = {
      id: record.id,
    };
    const res = await getDelectTrainStationApi(params);
    console.log(res);
    if ((res.message = "success")) {
      fetchData();
      ElMessage({
        message: "删除车站成功！",
        type: "success",
      });
    } else {
      ElMessage({
        message: "删除车站失败！请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.log(error);
  }
};
</script>
<style lang="scss" scoped>
.queryData {
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: wrap;
}
.queryItem {
  width: 500px;
  height: 30px;
  line-height: 30px;
  margin: 5px 15px;
  display: flex;
}
.spanname {
  height: 30px;
  width: 70px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #bbbfc3;
}
.inp {
  width: 240px;
}
.operition {
  display: flex;
  margin-top: 10px; // 这个可以添加一些与上方容器的间距
  // margin-left: 1070px; // 将按钮推到右边
  margin-bottom: 20px;
}
.pagination {
  margin-left: 90%;
}
</style>
